<template>
  <div>
    <my-swiper></my-swiper>
    <div class="hotClassDiv">
      <p>热销类目</p>
      <div class="hotClass">
        <div class="tangguo">
          <img src="../../../assets/1first/3美食/tangguo.png" alt="">
          <p>糖果</p>
        </div>
        <div class="penghua">
          <img src="../../../assets/1first/3美食/penghua.png" alt="">
          <p>膨化</p>
        </div>
        <div class="fangbianmian">
          <img src="../../../assets/1first/3美食/fangbianmian.png" alt="">
          <p>方便面</p>
        </div>
        <div class="qiaokeli">
          <img src="../../../assets/1first/3美食/qiaokeli.png" alt="">
          <p>巧克力</p>
        </div>
      </div>
    </div>
    <div class="tuijian">
      <div class="desc">
        <p>爆品推荐</p>
      </div>
      <div class="clearfix">
        <div class="fl shangpin" v-for="item in 6">
          <div class="tupian">
            <img src="../../../assets/1first/3美食/baopin.png" alt="" class="baopin">
            <img src="../../../assets/1first/3美食/yeshenglanmei.png" alt="" class="img">
          </div>
          <div class="title">
            <p>野生蓝莓果汁饮料</p>
            <p class="price">¥100</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import MySwiper from './MySwiper/MySwiper'
  export default {
    components: {
      MySwiper
    }
  }
</script>
<style scoped>
  .hotClassDiv{
    text-align: center;
    background: #fff;
    height: 8rem;
    display: flex;
    flex-direction: column;
    margin-top: 0.44rem;
    margin-bottom: 0.44rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .hotClassDiv>p{
    color: #4d4d4d;
    font-size: 0.67rem;
    margin: 0.38rem 0;
    flex: none;
  }
  .hotClass{
    display: flex;
    font-size: 0.53rem;
    flex: 1;
    align-items: center;
  }
  .hotClass>div{
    flex: 1;
  }
  .tangguo>img{
    width: 2.22rem;
  }
  .penghua>img{
    width: 2.67rem;
  }
  .fangbianmian>img{
    width: 2.58rem;
  }
  .qiaokeli>img{
    width: 3.07rem;
  }
  .tuijian{
    background: #fff;
    text-align: center;
    padding: 0.36rem;
  }
  .desc{
    color: #4d4d4d;
    font-size: 0.67rem;
    margin-bottom: 0.35rem;
  }
  .shangpin{
    border: 1px solid #ccc;
    box-sizing: border-box;
    width: 45%;
    /*height: 6.22rem;*/
    /*margin-bottom: 0.44rem;*/
    margin: 0 2.5% 0.44rem;
  }
  .tupian{
    position: relative;
  }
  .baopin{
    position: absolute;
    top: 0;
    left: 0;
    width: 0.88rem;
  }
  .img{
    margin-top: 0.67rem;
    margin-bottom: 0.96rem;
    width: 3.13rem;
  }
  .title{
    font-size: 0.53rem;
  }
  .price{
    color: #e53e42;
  }
</style>
